<template>
  <div>
    <div align="center">
       <!-- 年级选择-->
    <el-select v-model="grade" placeholder="请选择年级">
      <el-option
        v-for="item in options"
        :key="item.grade"
        :label="item.label"
        :value="item.grade"
      >
      </el-option>
    </el-select>

     <!-- 班级选择-->
    <el-select v-model="clsname" placeholder="请选择班级">
      <el-option
        v-for="item in optionss"
        :key="item.clsname"
        :label="item.label"
        :value="item.clsname"
      >
      </el-option>
    </el-select>
    
    <!-- 请输入教师姓名 -->
    <el-input
      @keyup.enter.native="selectinfoByIf"
      style="width: 240px; height: 100px"
      placeholder="教师姓名"
      v-model="name"
    >
    </el-input>
    <el-button
     icon="el-icon-search" type="primary"
      @click="selectinfoByIf"
    >
      搜索
    </el-button>
    </div>
   

    <el-table :data="tableData" style="width: 100%;margin-top:-5%">
      <el-table-column label="教师编号" width="180" show-overflow-tooltip align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.number }}</span>
        </template>
      </el-table-column>

      <el-table-column label="教师姓名" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="所带科目" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.subject}}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="所带班级" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper" v-if="scope.row.cname != null">
            <el-tag size="medium">
              {{ scope.row.cname }}
            </el-tag>
          </div>
          <div slot="reference" class="name-wrapper" v-else>
            <el-tag size="medium">
              暂无分配
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="班级排名" width="180" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">
              {{scope.row.rank}}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="compare(scope.$index, scope.row)"
            >成绩对比</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @next-click="next"
      @prev-click="prev"
      :current-page="currentPage"
      :page-sizes="[8]"
      :page-size="size"
      layout="total, sizes, prev, pager, next"
      :total="total"
      align="center"
    >
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../assets/commons";
export default {
  data() {
    return {
      currentPage: 1, //当前页
      page:1,
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小
      tableData: [],

      options:[
        {
          grade: "",
          label: "所有年级",
        },
        {
          grade: "高一",
          label: "高一",
        },
        {
          grade: "高二",
          label: "高二",
        },
        {
          grade: "高三",
          label: "高三"
        }, 
      ],
      grade:"",
      optionss:[
        {
          clsname: "",
          label: "所有班级",
        },
        {
          clsname: "1班",
          label: "1班",
        },
        {
          clsname: "2班",
          label: "2班",
        },
        {
          clsname: "3班",
          label: "3班"
        }, 
         {
          clsname: "4班",
          label: "4班",
        },
        {
          clsname: "5班",
          label: "5班",
        },
        {
          clsname: "6班",
          label: "6班"
        }, 
      ],
      clsname:"",
      name:"",
    };
  },
  methods: {
   
    selectinfoByIf(){

       axios
         .get(commons.baseUrl+"gradedean/teacherIf",
              {params:{page:this.page,size:this.size,
               cname:this.grade+this.clsname,name:this.name}})
         .then(resp=>{

           console.log(resp)
          this.tableData = resp.data.datas;
          this.total = resp.data.total;
          this.totalPage = resp.data.totalPage;
          this.currentPage = resp.data.currentPage;
          this.size = resp.data.size;
           
         })
    },
    //成绩信息
    compare($index, row){},

    //分页
    findByPage() {
      axios
        .get(
          commons.baseUrl +
            "gradedean/tcInfo?page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },

    //下一页
    next() {
      this.currentPage = this.currentPage + 1;
      axios
        .get(
          commons.baseUrl +
            "gradedean/tcInfo?page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },

    //上一页
    prev() {
      this.currentPage = this.currentPage - 1;
      axios
        .get(
          commons.baseUrl +
            "gradedean/tcInfo?page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then((res) => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },
  },
  mounted() {
    //axios  get请求
    //调用方法获取第一页数据
    this.findByPage();
  },
  computed: {},
};
</script>
<style scoped></style>
